<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>图片炸裂</title>
    <style type="text/css">
      body {
        background-color: #2d2d2d;
      }
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        width: 800px;
        height: 332px;
        margin: 100px auto;
        position: relative;
      }
      #box > div {
        transform-style: preserve-3d;
        position: absolute;
        top: 0;
        left: 0;
      }
      #box > div > div {
        background: url(./uploads/轮播1.jpg);
        position: absolute;
        transform: perspective(800px);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script type="text/javascript">
      var imgArr = [
        './uploads/轮播1.jpg',
        './uploads/轮播2.jpg',
        './uploads/轮播3.jpg',
        './uploads/轮播4.jpg',
      ]
      var index = 0
      var z = 99999999
      boom(8, 5)
      function boom(l, t) {
        var oParentNode = document.createElement('div')
        oParentNode.style.zIndex = z
        z--
        box.appendChild(oParentNode)
        var x = l,
          y = t
        for (var i = 0; i < y; i++) {
          for (var j = 0; j < x; j++) {
            var oDiv = document.createElement('div')
            oDiv.style.background = 'url(' + imgArr[index] + ')'
            oDiv.style.width = box.clientWidth / x + 'px'
            oDiv.style.height = box.clientHeight / y + 'px'
            oDiv.style.left = (box.clientWidth / x) * j + 'px'
            oDiv.style.top = (box.clientHeight / y) * i + 'px'
            oDiv.style.backgroundPositionX = (box.clientWidth / x) * -j + 'px'
            oDiv.style.backgroundPositionY = (box.clientHeight / y) * -i + 'px'
            oDiv.style.transition = Math.random() * 1 + 0.5 + 's'
            oParentNode.appendChild(oDiv)
          }
        }
        var allDiv = oParentNode.children

        setTimeout(function () {
          index++
          index == imgArr.length && (index = 0)
          boom(l, t)
          for (var k = 0; k < allDiv.length; k++) {
            allDiv[k].style.transform =
              'perspective(800px) rotateX(' +
              (Math.random() * 360 - 180) +
              'deg) rotateY(' +
              (Math.random() * 360 - 180) +
              'deg) translateX(' +
              (Math.random() * 400 - 200) +
              'px) translateY(' +
              (Math.random() * 400 - 200) +
              'px) translateZ(' +
              (Math.random() * 200 + 100) +
              'px)'
            allDiv[k].style.opacity = 0
          }
        }, 2000)
        setTimeout(function () {
          oParentNode.remove()
        }, 3500)
      }
    </script>
  </body>
</html>
